<template>
    <div class="user-article">
        <div class="container">
            <div class="left">
                <div class="content">
                    <div class="article-user">
                        <a href="javascript:;" class="message">
                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                            <div class="box">
                                <div class="user-name">Hinsenoo</div>
                                <div class="create-time">2020年05月19日 <span>阅读 13608</span></div>
                            </div>
                        </a>
                        <el-button type="primary" size="small">+ 关注</el-button>
                    </div>
                    <div class="article-title">
                        <img v-lazy="'/imgs/slideshow/head06.jpg'" alt="">
                        <h1>人生恰似一场永不停止的远足——珠峰东坡大环线</h1>
                    </div>
                    <div class="article-content">
                        <div><p>9月15日，由临渭区文物旅游局、渭南文化旅游产业发展有限责任公司主办的2017临渭旅游推介活动在西安曲江盛美利亚酒店隆重举行。本次活动主要以宣传渭南临渭区“四大宜游园区一基地”和五大旅游板块为基础进行宣传。<br></p><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a1.jpg'"></div>
                        </div>
                        <div></div>
                        </div><p>本次推介会在具有地域文化特色的非物质遗产—雄浑磅礴的渭南老腔表演中拉开序幕，让来宾深刻地感受到了渭南这座城市历久弥新的文化内涵和人文魅力；渭南首家本土曲艺文化品牌渭曲社，展示了结合本地人文历史特色的原创相声。同时，会场内播放的渭南、临渭旅游宣传视频，吸引了现场媒体镜头的关注，不仅现场让大家深入了解了渭南及临渭的旅游、人文、历史资源，同时也借助新媒体平台进行了推广。</p><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a2.jpg'"></div>
                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a3.jpg'"></div>
                        </div>
                        <div></div>
                        </div><p>近年来，临渭区高度重视旅游业发展，适时提出“宜居宜游·富美临渭”为城市发展总目标，同时以创建陕西省旅游示范区暨国家全域旅游示范区为契机，推动临渭旅游业由“景区旅游”向“全域旅游”发展模式转变，渭南文旅公司为积极贯彻落实区委区政府部署要求，充分发挥渭南龙头旅游企业的带动作用，累计投资13亿元建设“四园区一基地”（即渭南葡萄产业园、渭南航天生态园、渭南军事博览园、渭南桃花源民俗文化园、渭南花卉苗木基地），拓展了五大旅游板块功能（生态休闲游、历史人文游、古城文化游、红色爱国游、特色乡村游），营造出“品质化、休闲化、人性化、特色化”的旅游环境，切实强化“旅游兴区”实施战略，从而形成临渭区“政府主导、市场运作、部门联动、社会参与”的全域化旅游发展格局。</p><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a4.jpg'"></div>
                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a5.jpg'"></div>
                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a6.jpg'"></div>
                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a7.jpg'"></div>
                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
                        <div><img v-lazy="'/imgs/demo/a8.jpg'"></div>
                        </div>
                        <div></div>
                        </div><p>为了更好的服务游客，服务供应商及投资商，渭南文旅公司表示将严格按照旅游景区建设标准，丰富旅游+农业，旅游+红色、旅游+生态、旅游+体育、旅游+教育、旅游+互联网、旅游+科技等旅游元素，完善“吃住行游购娱”及“商养学闲奇情”旅游要素，提升旅游特色化、品质化服务，为各地游客提供一个舒心满意的旅游环境及氛围，同时借助兵马俑、华山两个国际性景区强大的客源资源，差异化弥补中间地带旅游空白，从而打造陕西东线旅游新线路，增加陕西东线旅游产品多样性。</p><div>
                        <div>
                        <div></div>

                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
    
                        </div>
                        <div></div>
                        </div><div>
                        <div>
                        <div></div>
                        </div>
                        </div>
                        </div>
                        <br>
                    </div>
                    <div class="article-good">
                        <div class="good">
                            <div class="icon"><img src="/imgs/icons/good-article.png" alt=""></div>
                            <span>x 人点赞</span>
                        </div>
                        <div class="good">
                            <div class="icon"><img src="/imgs/icons/collect-article.png" alt=""></div>
                            <span>收藏</span>
                        </div>
                        <div class="good">
                            <div class="icon"><img src="/imgs/icons/gps.png" alt=""></div>
                            <span>广西</span>
                        </div>
                        
                    </div>
                    <div class="article-userAgain">
                        <div class="message">
                            <el-avatar size="large" :src="circleUrl"></el-avatar>
                            <div class="box">
                                <div class="user-name">Hinsenoo</div>
                                <div class="create-time">发布了 1 篇文章 · 获得点赞 999 · 获得阅读 999</div>
                            </div>
                        </div>
                        <el-button type="primary" size="small">+关注</el-button>
                    </div>
                </div>
                <div class="article-comment" id="comment">
                    <div class="title">评论</div>
                    <div class="comment">
                        <div class="commentInput">
                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                            <el-input v-model="commentInput" 
                            type="textarea"
                            :rows="2"
                            placeholder="输入评论..."
                            @focus="$refs.commentButton.style.height = '40px'"></el-input>
                        </div>
                        <div ref="commentButton" class="commentButton">
                            <el-button size="small" type="primary" round>发布</el-button>
                            <el-button @click="$refs.commentButton.style.height = '0'" size="small" round>取消</el-button>
                        </div>
                    </div>
                    <!-- 评论 -->
                    <div class="commentBox">
                        <a href="javascript:;">
                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                        </a>
                        <div class="commentMessage">
                            <a href="javascript:;">钱塘风华</a>
                            <p>金銮湾的沙子细软柔滑得如同温柔的梦，退潮后的海滩平滑如镜，天空与大海，镜面与沙滩，让你真切感受到“天空之镜”的绮丽。</p>
                            <div class="date">
                                <span class="time">1天前</span>
                                <a href="javascript:;"><img src="/imgs/icons/good-article.png" alt=""> 0</a>
                                <a href="javascript:;"><img src="/imgs/icons/comment-article.png" alt=""> 回复</a>
                            </div>
                            <!-- 评论内回复 -->
                            <div class="commentBox inside">
                                <a href="javascript:;">
                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                </a>
                                <div class="commentMessage">
                                    <a href="javascript:;">Hinsenoo</a>
                                    <p>
                                        回复 
                                        <a href="javascript:;">钱塘风华</a>:
                                        金銮湾的沙子细软柔滑得如同温柔的梦，退潮后的海滩平滑如镜，天空与大海，镜面与沙滩，让你真切感受到“天空之镜”的绮丽。</p>
                                    <div class="date">
                                        <span class="time">1天前</span>
                                        <a href="javascript:;"><img src="/imgs/icons/good-article.png" alt=""> 0</a>
                                        <a href="javascript:;"><img src="/imgs/icons/comment-article.png" alt=""> 回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="commentBox">
                        <a href="javascript:;">
                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                        </a>
                        <div class="commentMessage">
                            <a href="javascript:;">钱塘风华</a>
                            <p>金銮湾的沙子细软柔滑得如同温柔的梦，退潮后的海滩平滑如镜，天空与大海，镜面与沙滩，让你真切感受到“天空之镜”的绮丽。</p>
                            <div class="date">
                                <span class="time">1天前</span>
                                <a href="javascript:;"><img src="/imgs/icons/good-article.png" alt=""> 0</a>
                                <a href="javascript:;"><img src="/imgs/icons/comment-article.png" alt=""> 回复</a>
                            </div>
                            <!-- 评论内回复 -->
                            <div class="commentBox inside">
                                <a href="javascript:;">
                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                </a>
                                <div class="commentMessage">
                                    <a href="javascript:;">Hinsenoo</a>
                                    <p>
                                        回复 
                                        <a href="javascript:;">钱塘风华</a>:
                                        金銮湾的沙子细软柔滑得如同温柔的梦，退潮后的海滩平滑如镜，天空与大海，镜面与沙滩，让你真切感受到“天空之镜”的绮丽。</p>
                                    <div class="date">
                                        <span class="time">1天前</span>
                                        <a href="javascript:;"><img src="/imgs/icons/good-article.png" alt=""> 0</a>
                                        <a href="javascript:;"><img src="/imgs/icons/comment-article.png" alt=""> 回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="commentBox">
                        <a href="javascript:;">
                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                        </a>
                        <div class="commentMessage">
                            <a href="javascript:;">钱塘风华</a>
                            <p>金銮湾的沙子细软柔滑得如同温柔的梦，退潮后的海滩平滑如镜，天空与大海，镜面与沙滩，让你真切感受到“天空之镜”的绮丽。</p>
                            <div class="date">
                                <span class="time">1天前</span>
                                <a href="javascript:;"><img src="/imgs/icons/good-article.png" alt=""> 0</a>
                                <a href="javascript:;"><img src="/imgs/icons/comment-article.png" alt=""> 回复</a>
                            </div>
                            <!-- 评论内回复 -->
                            <div class="commentBox inside">
                                <a href="javascript:;">
                                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                </a>
                                <div class="commentMessage">
                                    <a href="javascript:;">Hinsenoo</a>
                                    <p>
                                        回复 
                                        <a href="javascript:;">钱塘风华</a>:
                                        金銮湾的沙子细软柔滑得如同温柔的梦，退潮后的海滩平滑如镜，天空与大海，镜面与沙滩，让你真切感受到“天空之镜”的绮丽。</p>
                                    <div class="date">
                                        <span class="time">1天前</span>
                                        <a href="javascript:;"><img src="/imgs/icons/good-article.png" alt=""> 0</a>
                                        <a href="javascript:;"><img src="/imgs/icons/comment-article.png" alt=""> 回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="right">
                <!-- 作者信息 -->
                <div class="right-user">
                    <span>关于作者</span>
                    <a href="javascript:;" class="user">
                        <el-avatar :size="50" :src="circleUrl"></el-avatar>
                        <div class="box">
                            <div class="user-name">Hinsenoo</div>
                            自由职业者
                        </div>
                    </a>
                    <div class="honor">
                        <div>
                            <p><i><img src="/imgs/icons/good-blue.png" alt=""></i>获得点赞<span>10</span></p>
                            <p><i><img src="/imgs/icons/read.png" alt=""></i>文章被阅读<span>999</span></p>
                        </div>
                    </div>
                </div>
                <!-- 推荐文章 -->
                <div class="right-recommend">
                    <h3>推荐文章</h3>
                    <a href="javascript:;" class="recommend">
                        <div class="title">人生恰似一场永不停止的远足——珠峰东坡大环线</div>
                        <div class="icon">
                            <span><img src="/imgs/icons/good-article.png" alt="">32</span>
                            <span><img class="comment" src="/imgs/icons/comment-article.png" alt="">11</span>
                        </div>
                    </a>
                    <a href="javascript:;" class="recommend">
                        <div class="title">人生恰似一场永不停止的远足——珠峰东坡大环线</div>
                        <div class="icon">
                            <span><img src="/imgs/icons/good-article.png" alt="">32</span>
                            <span><img class="comment" src="/imgs/icons/comment-article.png" alt="">11</span>
                        </div>
                    </a>
                    <a href="javascript:;" class="recommend">
                        <div class="title">人生恰似一场永不停止的远足——珠峰东坡大环线</div>
                        <div class="icon">
                            <span><img src="/imgs/icons/good-article.png" alt="">32</span>
                            <span><img class="comment" src="/imgs/icons/comment-article.png" alt="">11</span>
                        </div>
                    </a>
                    <a href="javascript:;" class="recommend">
                        <div class="title">人生恰似一场永不停止的远足——珠峰东坡大环线</div>
                        <div class="icon">
                            <span><img src="/imgs/icons/good-article.png" alt="">32</span>
                            <span><img class="comment" src="/imgs/icons/comment-article.png" alt="">11</span>
                        </div>
                    </a>
                    <a href="javascript:;" class="recommend">
                        <div class="title">人生恰似一场永不停止的远足——珠峰东坡大环线</div>
                        <div class="icon">
                            <span><img src="/imgs/icons/good-article.png" alt="">32</span>
                            <span><img class="comment" src="/imgs/icons/comment-article.png" alt="">11</span>
                        </div>
                    </a>
                </div>
                <div class="right-app">
                    <div class="appCode"><img src="/imgs/QRCode.jpg" alt=""></div>
                    <div class="word">下载车车互联App<i class="el-icon-download"></i><div>最好的旅行方式是和一群志同道合的人。</div></div>
                </div>
            </div>
            <!-- 悬浮按钮 -->
            <div class="fixed">
                <div class="icon" @click="goodShow=!goodShow">
                    <a v-show="!goodShow" class="icon-good" href="javascript:;">
                        <span>12</span>
                    </a>
                    <a v-show="goodShow" class="icon-goodClick" href="javascript:;">
                        <span>12</span>
                    </a>
                </div>
                <div class="icon">
                    <a class="icon-comment" href="#comment">
                        <span>0</span>
                    </a>
                </div>
                <div class="icon" @click="collectShow=!collectShow">
                    <a v-show="!collectShow" class="icon-collect" href="javascript:;"></a>
                    <a v-show="collectShow" class="icon-collectClick" href="javascript:;"></a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'user-article',
        data(){
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                // 是否已点赞
                goodShow: false,
                collectShow: false,
                // 评论框
                commentInput: '',
            }
        },
        methods:{
        }
    }
</script>

<style lang="scss" scoped>
    .user-article{
        position: relative;
        img{
            width: 100%;
        }
        padding-top: 20px;
        .container{
            display: flex;
            .left{
                flex: 3;
                margin-right: 10px;
                .content{
                    padding: 20px;
                    // background-color: rgb(245, 186, 186);
                    margin-bottom: 20px;
                    background-color: #fff;
                    .article-user{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 20px;
                        .message{
                            display: flex;
                            align-items: center;
                            .box{
                                margin-left: 10px;
                                .user-name{
                                    font-weight: 700;
                                    color: #333;
                                    font-size: 18px;
                                    font-weight: 700;
                                }
                                .create-time{
                                    font-size: 14px;
                                    letter-spacing: 1px;
                                    color: #999999;
                                }
                            }
                        }
                    }
                    .article-title{
                        width: 100%;
                        img{
                            width: 100%;
                        }
                        h1{
                            font-size: 30px;
                            margin: 20px 0;
                        }
                    }
                    .article-content{
                        font-size: 16px;
                        line-height: 30px;
                        p{
                            margin-bottom: 20px;
                        }
                        img{
                            margin-bottom: 20px;
                        }
                    }
                    .article-good{
                        width: 100%;
                        border-bottom: 1px solid #ccc;
                        display: flex;
                        justify-content: center;
                        text-align: center;
                        padding-bottom: 20px;
                        margin-bottom: 20px;
                        .good{
                            margin-right: 30px;
                            .icon{
                                margin: 0 auto;
                                width: 20px;
                                height: 20px;
                                padding: 5px;
                                border: 1px #ccc solid;
                                border-radius: 30px;
                                cursor: pointer;
                                margin-bottom: 5px;
                                &:hover{
                                    background: #F5F5F5;
                                }
                            }
                            span{
                                
                                color: #999999;
                            }
                        }
                    }
                    .article-userAgain{
                        width: 100%;
                        height: 70px;
                        background: #F5F5F5;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        box-sizing: border-box;
                        margin-bottom: 20px;
                        padding: 0 20px;
                        cursor: pointer;
                        .message{
                            display: flex;
                            align-items: center;
                            .box{
                                margin-left: 10px;
                                .user-name{
                                    font-weight: 700;
                                    color: #333;
                                    font-size: 18px;
                                    font-weight: 700;
                                }
                                .create-time{
                                    font-size: 14px;
                                    letter-spacing: 1px;
                                    color: #999999;
                                }
                            }
                        }
                    }
                }
                .article-comment{
                    background-color: white;
                    padding: 20px;
                    margin-bottom: 50px;
                    .title{
                        text-align: center;
                        font-size: 16px;
                        color: #8a93a0;
                        margin-bottom: 20px;
                    }
                    .comment{
                        background: #fafbfc;
                        padding: 12px 15px 5px 15px;
                        .commentInput{
                            display: flex;
                            margin-bottom: 10px;
                            align-items: center;
                            .el-textarea{
                                margin-left: 20px;
                                width: 90%;
                            }
                        }
                        .commentButton{
                            height: 0;
                            overflow: hidden;
                            margin-right: 5px;
                            text-align: right;
                            transition: height 0.5s;
                        }
                    }
                    // 评论
                    .commentBox{
                        margin: 10px 19px 0 58px;
                        display: flex;
                        a{
                            color: black;
                            font-size: 14px;
                            .el-avatar{
                                margin-right: 10px;
                            }
                        }
                        .commentMessage{
                            font-size: 14px;
                            border-bottom: 1px solid #e5e5e5;
                            padding-bottom: 20px;
                            p{
                                margin: 8px 0 13px 0;
                            }
                            .date{
                                color: #8a93a0;
                                display: flex;
                                margin-bottom: 10px;
                                a{
                                    flex:0.5;
                                    text-align: right;
                                    margin-right: 20px;
                                    display: flex;
                                    align-items: center;
                                    color: #8a93a0;
                                    &:hover{
                                        opacity: 0.8;
                                    }
                                    img{
                                        width: 16px;
                                        height: 16px;
                                        margin-right: 5px;
                                    }
                                }
                                .time{
                                    flex: 3;
                                    text-align: left;
                                }
                            }
                            // 评论内回复
                            .inside{
                                margin: 0;
                                padding: 15px 15px;
                                background-color: #fafbfc;
                                .commentMessage{
                                    border-bottom: 0;
                                    padding-bottom: 0;
                                    p{
                                        a{
                                            color: #406599;
                                        }
                                    }
                                    .date{
                                        margin: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .right{
                flex: 1;
                .right-user{
                    background: #fff;
                    margin-bottom: 20px;
                    span{
                        display: block;
                        font-size: 14px;
                        padding: 12px 15px;
                        border-bottom: 1px solid hsla(0,0%,58.8%,.1);
                    }
                    .user{
                        display: flex;
                        padding: 12px 15px;
                        .box{
                            margin-left: 10px;
                            color: #999999;
                            font-size: 14px;
                            .user-name{
                                color: black;
                                font-size: 16px;
                                font-weight: bold;
                                margin-bottom: 7px;
                            }
                        }
                    }
                    .honor{
                        padding-bottom: 10px;
                        div{
                            padding: 0 15px;
                            font-size: 14px;
                            p{
                                line-height: 10px;
                                display: flex;
                                align-items: center;
                                i{
                                    display: inline-block;
                                    padding: 5px;
                                    width: 15px;
                                    height: 15px;
                                    background-color: rgb(225, 239, 255);
                                    border-radius: 25px;
                                    margin-right: 15px;
                                    img{
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                                span{
                                    margin-left: 5px;
                                    border-bottom: 0px;
                                }
                            }
                        }
                    }
                }
                .right-app{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100px;
                    margin-bottom: 20px;
                    background-color: white;
                    .appCode{
                        width: 50px;
                        height: 50px;
                        margin-right: 5px;
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .word{
                        color: black;
                        font-size: 15px;
                        font-weight: bold;
                        i{
                            font-size: inherit;
                        }
                        div{
                            width: 150px;
                            margin-top: 4px;
                            font-weight: 300;
                            color: #999;
                            font-size: 13px;     
                        }
                    }
                }
                .right-recommend{
                    width: 100%;
                    background: white;
                    margin-bottom: 20px;
                    h3{
                        font-size: 14px;
                        padding: 12px 15px;
                        font-weight: 500;
                        border-bottom: 1px solid hsla(0,0%,58.8%,.1);
                    }
                    .recommend{
                        display: block;
                        font-size: 14px;
                        padding: 12px 15px;
                        color: black;
                        .title{
                            margin-bottom: 10px;
                        }
                        .icon{
                            span{
                                display: inline-block;
                                color: #bfbfbf;
                                margin-right: 20px;
                                img{
                                    width: 16px;
                                    height: 16px;
                                    margin-right: 5px;
                                }
                                .comment{
                                    box-sizing: border-box;
                                    position: relative;
                                    top: 2px;
                                }
                            }
                        }
                        &:hover{
                            background: #F5F5F5;
                        }
                    }
                }
            }
            .fixed{
                position: fixed;
                top: 50%;
                left: calc((100% - 960px)/2 - 66px);
                transform: translateY(-50%);
                height: 150px;
                .icon{
                    // width: 36px;
                    // height: 36px;
                    // background-color: white;
                    margin-bottom: 10px;
                    a{
                        // border: 1px solid #a58f8f;
                        display: block;
                        position: relative;
                        width: 40px;
                        height: 40px;
                        border-radius: 26px;
                        box-shadow: 0 2px 4px 0 rgba(0,0,0,.04);
                        span{
                            position: absolute;
                            right: -6px;
                            top: -6px;
                            background-color: #bfbfbf;
                            border-radius: 5px;
                            padding: 1px 3px;
                            font-size: 12px;
                            transform: scale(0.8);
                            color: white;
                            line-height: 12px;
                        }
                    }
                    .icon-good{
                        background: url('/imgs/icons/good-article.png') #fff no-repeat center;
                        background-size: 22px;
                        &:hover{
                            background: url('/imgs/icons/good-article2.png') #fff no-repeat center;
                            background-size: 24px;
                        }
                    }
                    .icon-goodClick{
                        background: url('/imgs/icons/good-article4.png') #fff no-repeat center;
                        background-size: 22px;
                        span{
                            background-color: #409EFF;
                        }
                    }
                    .icon-comment{
                        background: url('/imgs/icons/comment-article.png') #fff no-repeat center;
                        background-size: 22px;
                        &:hover{
                            background: url('/imgs/icons/comment-article2.png') #fff no-repeat center;
                            background-size: 24px;
                        }
                    }
                    .icon-collect{
                        background: url('/imgs/icons/collect-article.png') #fff no-repeat center;
                        background-size: 22px;
                        &:hover{
                            background: url('/imgs/icons/collect-article2.png') #fff no-repeat center;
                            background-size: 24px;
                        }
                    }
                    .icon-collectClick{
                        background: url('/imgs/icons/collect-article3.png') #fff no-repeat center;
                        background-size: 22px;
                    }
                }
            }
        }
    }
</style>